<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <link th:href="@{/layer/css/layui.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">

</head>
<body class="childrenBody">
<div th:replace="~{commons/commons::topdao}"></div>
<div class="container-fluid">
    <div class="row">
        <form class="layui-form" id="searchFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">卡号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" id="address" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                        <a href="javascript:void(0)" class="search_btn layui-btn">查询</a>
                        <button type="reset" class="layui-btn layui-btn-warm">挂失</button>
                </div>

            </div>
        </form>
    </div>

</div>
<table id="tabmenber" layui-filter="tabmenber"></table>
<script type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
<script type="text/javascript" th:src="@{/layer/layui.js}"></script>
<script type="text/html" id="tableToolBar">
    <button  id="memadd" class="layui-btn">添加</button>

</script>
<!--<script type="text/html" id="userListBar">-->
<!--        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>-->
<!--        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>-->
<!--</script>-->
<script type="text/javascript">
    var tableIns;
    function reloadTable() {
        tableIns.reload({
            where: {
                name: $("#name").val(),
                address: $("#address").val()
            }
            //设置当前页面为第一页
            , page: {
                curr: 1
            }
        });
    }

    layui.use(['form', 'layer', 'table'],function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery,
            table = layui.table;
        tableIns = table.render({
            elem: '#tabmenber',
            url: '/member/loadAllmenber',
            cellMinWidth: 95,
            toolbar: '#tableToolBar',
            page: true,
            height: "full-180",
            limit: 10,
            limits: [10, 15, 20, 25],
            id: "userListTable",
            cols: [
                [
                    // {type: "checkbox", fixed: "left", width: 50},
                    {field: 'memberid', title: 'ID', width: 60, align: "center" ,hide: true},
                    {field: 'membernumber', title: '卡号', width: 130, align: "center"},
                    {field: 'clientname', title: '会员名称', width: 120, align: "center"},
                    {field: 'birthday', title: '会员生日', width: 150, align: "center"},
                    {field: 'balance', title: '余额', align: "center", width: 75,templet:function (data) {
                        return data.balance == null ? "0" : data.balance
                        }},
                    {field: 'identity', title: '证件号码', align: "center", width: 150},
                    {field: 'unit', title: '单位', align: "center", width: 150},
                    {field: 'adress', title: '地址', align: "center", width: 150},
                    {field: 'integral', title: '积分', align: "center", width: 150},
                   {field: 'tomember', title: '发卡日期', align: "center", width: 150},
                    {title: '操作', width: 250, templet: userListBar, fixed: "right", align: "center"}
                ]
            ],
            done: function (res, curr) {
                var currPage = curr; // 获得当前页码
                var dataLength = res.data.length; // 获得当前页的记录数
                var count = res.count; // 获得总记录数
                if (dataLength == 0 && count != 0) { //如果当前页的记录数为0并且总记录数不为0
                    table.reload("userListTable", { // 刷新表格到上一页
                        page: {
                            curr: currPage - 1
                        }
                    });
                }
            }
        });
        //点击搜索按钮
        $(".search_btn").on("click", function () {
            reloadTable();
        });
        $("#memadd").on("click",function () {
            console.log("123");
            toAddmenber();
        });
        function userListBar(data){
            var memberid = data.memberid;
            var btns = "";
            btns +='<a class="layui-btn layui-btn-xs" onclick="updatemem('+memberid+')">修改</a>'
            btns +='<a class="layui-btn layui-btn-xs layui-btn-danger" onclick=delectmember('+memberid+')>删除</a>'
            btns +='<a class="layui-btn layui-btn-xs layui-btn-warm" onclick=topup('+memberid+')>充值</a>'
            return btns;
        }

        function toAddmenber() {

            var index = layer.open({
               title: "新增会员",
               type: 2,
                area: ['800px', '600px'],
                content: "/member/addmember",
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500);
                }
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        }

    });
    function updatemem(memberid) {
        var index = layer.open({
            title: "修改会员",
            type: 2,
            area: ['800px', '600px'],
            content: "/member/updatemember?id=" + memberid,
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                setTimeout(function () {
                    layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500);
            }
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
    };
    function delectmember(billid) {
        //console.log("456");
        layer.confirm('确定删除会员吗？', {icon: 3, title: '提示信息'}, function (index) {
            $.post(
                "/member/delectMemeber", //url
                {"id": billid}, //需要删除的用户ID
                function (data) {
                    if (data.code == 0) {
                        //成功提示
                        layer.msg(data.msg, {icon: 1, time: 2000}, function () {
                            //刷新table
                            tableIns.reload();
                            //关闭confirm
                            layer.close(index);
                        });
                    } else {
                        //失败
                        layer.msg(data.msg, {icon: 2, time: 3000});
                    }
                }
            );
        });
    }
    function topup(memberid) {
        var index = layer.open({
            title: "会员充值",
            type: 2,
            area: ['800px', '600px'],
            content: "/member/Topupmember?id=" + memberid,
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                setTimeout(function () {
                    layui.layer.tips('点击此处返回会员列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500);
            }
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
    }
</script>
</body>
</html>